import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { CardCarousel, Card } from './CardCarousel';

// 示例数据
const sampleData = [
  { id: 1, title: '产品 1', description: '这是第一个产品的描述', price: '¥99', image: '🛍️' },
  { id: 2, title: '产品 2', description: '这是第二个产品的描述', price: '¥199', image: '📱' },
  { id: 3, title: '产品 3', description: '这是第三个产品的描述', price: '¥299', image: '💻' },
  { id: 4, title: '产品 4', description: '这是第四个产品的描述', price: '¥399', image: '🎮' },
  { id: 5, title: '产品 5', description: '这是第五个产品的描述', price: '¥499', image: '📷' },
];

const meta: Meta<typeof CardCarousel> = {
  title: 'Components/CardCarousel',
  component: CardCarousel,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: '一个功能强大的卡片切换组件，支持多种配置选项和自定义样式。支持智能缩放、自适应高度、流畅动画等特性。',
      },
    },
  },
  argTypes: {
    data: {
      description: '卡片数据数组',
      control: { type: 'object' },
    },
    visibleCount: {
      description: '可见卡片数量（仅支持奇数）',
      control: { type: 'number', min: 1, max: 7, step: 2 },
    },
    defaultIndex: {
      description: '默认选中卡片索引',
      control: { type: 'number', min: 0, max: 4 },
    },
    cardSpacing: {
      description: '卡片间距（像素）',
      control: { type: 'number', min: -100, max: 200 },
    },
    cardWidth: {
      description: '卡片宽度（像素）',
      control: { type: 'number', min: 80, max: 300 },
    },
    className: {
      description: '自定义类名',
      control: { type: 'text' },
    },
  },
  args: {
    data: sampleData,
    visibleCount: 3,
    defaultIndex: 2,
    cardSpacing: 0,
    cardWidth: 120,
  },
};

export default meta;
type Story = StoryObj<typeof CardCarousel>;

// 基础用法
export const Default: Story = {
  render: (args) => (
    <div className="w-full h-96">
      <CardCarousel {...args}>
        {args.data.map((item, index) => {
          console.log(item)
          return (
            <Card key={item.id} index={index}>
              <div className="w-64 h-80 bg-white rounded-xl shadow-lg border border-gray-200 flex flex-col items-center justify-center p-6 transition-all duration-300 ease-in-out hover:shadow-xl card-carousel-inactive:opacity-60 card-carousel-inactive:shadow-md card-carousel-active:opacity-100 card-carousel-active:shadow-xl card-carousel-active:border-blue-300">
                <div className="text-6xl mb-4">{item.image}</div>
                <h3 className="text-xl font-bold mb-2 text-gray-800">{item.title}</h3>
                <p className="text-sm text-gray-600 text-center mb-4">{item.description}</p>
                <div className="text-2xl font-bold text-blue-600">{item.price}</div>
                <div className="mt-4 px-4 py-2 bg-blue-100 text-blue-600 rounded-full text-xs font-medium">
                  点击查看详情
                </div>
              </div>
            </Card>
          )
        })}
      </CardCarousel>
    </div>
  ),
};

// 单卡片模式
export const SingleCard: Story = {
  args: {
    visibleCount: 1,
    cardSpacing: 100,
  },
  render: (args) => (
    <div className="w-full h-96">
      <CardCarousel {...args}>
        {args.data.map((item, index) => (
          <Card key={item.id} index={index}>
            <div className="w-40 h-48 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg text-white flex items-center justify-center p-4 transition-all duration-300 ease-in-out card-carousel-inactive:opacity-60 card-carousel-inactive:shadow-md card-carousel-active:opacity-100 card-carousel-active:shadow-xl">
              <div className="text-3xl mr-4">{item.image}</div>
              <div>
                <h4 className="text-lg font-bold">{item.title}</h4>
                <p className="text-sm opacity-90">{item.price}</p>
              </div>
            </div>
          </Card>
        ))}
      </CardCarousel>
    </div>
  ),
};

// 多卡片模式
export const MultipleCards: Story = {
  args: {
    visibleCount: 5,
    cardSpacing: 80,
  },
  render: (args) => (
    <div className="w-full h-96">
      <CardCarousel {...args}>
        {args.data.map((item, index) => (
          <Card key={item.id} index={index}>
            <div className="w-40 h-48 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-lg text-white flex flex-col items-center justify-center p-3 transition-all duration-300 ease-in-out card-carousel-inactive:opacity-60 card-carousel-inactive:shadow-md card-carousel-active:opacity-100 card-carousel-active:shadow-xl">
              <div className="text-2xl mb-1">{item.image}</div>
              <h4 className="text-sm font-bold text-center">{item.title}</h4>
            </div>
          </Card>
        ))}
      </CardCarousel>
    </div>
  ),
};

// 重叠效果
export const OverlappingCards: Story = {
  args: {
    visibleCount: 3,
    cardSpacing: -50,
  },
  render: (args) => (
    <div className="w-full h-96">
      <CardCarousel {...args}>
        {args.data.slice(0, 3).map((item, index) => (
          <Card key={item.id} index={index}>
            <div className="w-32 h-40 bg-gradient-to-br from-green-400 to-blue-500 rounded-lg text-white flex flex-col items-center justify-center p-3 transition-all duration-300 ease-in-out card-carousel-inactive:opacity-60 card-carousel-inactive:shadow-md card-carousel-active:opacity-100 card-carousel-active:shadow-xl">
              <div className="text-2xl mb-1">{item.image}</div>
              <h4 className="text-sm font-bold text-center">{item.title}</h4>
            </div>
          </Card>
        ))}
      </CardCarousel>
    </div>
  ),
};

// 分散展示
export const SpacedCards: Story = {
  args: {
    visibleCount: 3,
    cardSpacing: 50,
  },
  render: (args) => (
    <div className="w-full h-96">
      <CardCarousel {...args}>
        {args.data.slice(0, 3).map((item, index) => (
          <Card key={item.id} index={index}>
            <div className="w-32 h-40 bg-gradient-to-br from-red-400 to-pink-500 rounded-lg text-white flex flex-col items-center justify-center p-3 transition-all duration-300 ease-in-out card-carousel-inactive:opacity-60 card-carousel-inactive:shadow-md card-carousel-active:opacity-100 card-carousel-active:shadow-xl">
              <div className="text-2xl mb-1">{item.image}</div>
              <h4 className="text-sm font-bold text-center">{item.title}</h4>
            </div>
          </Card>
        ))}
      </CardCarousel>
    </div>
  ),
};

// 自定义样式
export const CustomStyled: Story = {
  args: {
    visibleCount: 3,
    cardSpacing: 0,
    className: 'h-32 bg-gradient-to-r from-purple-400 to-pink-400 rounded-lg border-4 border-yellow-300',
  },
  render: (args) => (
    <div className="w-full h-96">
      <CardCarousel {...args}>
        {args.data.map((item, index) => (
          <Card key={item.id} index={index} className="hover:scale-110 transition-transform duration-300">
            <div className="w-48 h-64 bg-white rounded-xl shadow-lg flex flex-col items-center justify-center p-4">
              <div className="text-4xl mb-2">{item.image}</div>
              <h4 className="text-lg font-bold text-center mb-2">{item.title}</h4>
              <p className="text-sm text-center opacity-90">{item.price}</p>
            </div>
          </Card>
        ))}
      </CardCarousel>
    </div>
  ),
};